<template>
  <div class="grid">
    <Grid :gutter="10" :column-num="2">
      <GridItem
        v-for="(option, index) in scope.options"
        :key="index" icon="coupon-o"
        @click="handleSelect(option)">
        <template #text>
          <span
            :class="[{ active: option.platformType === scope.value }]">{{ option.name }}</span>
        </template>
      </GridItem>
    </Grid>
  </div>
  <div
    class="footer van-hairline--top van-dialog__footer van-hairline--left">
    <Button @click="props.hide" size="large"
      class="van-button van-button--default van-button--large van-dialog__cancel">
      取消
    </Button>
  </div>
</template>
<script setup lang="ts">
import {
  Button, Grid, GridItem,
} from 'vant';
import { onMounted, type PropType } from 'vue';

import useAppConfg from '../hooks/useAppConfg';
import type { PlatformTypeItem } from '../models/PlatformConfig';

const props = defineProps({
  scope: {
    type: Object as PropType<{
      options: PlatformTypeItem[]
      emit: (option: PlatformTypeItem) => void
      value: string
    }>,
    default: () => ({}),
  },
  hide: {
    type: Function as PropType<() => void>,
    default: () => { },
  },
});

const handleSelect = (option: PlatformTypeItem) => {
  props.scope.emit(option);
  props.hide();
};

const {
  fetchSyncList,
} = useAppConfg();

onMounted(async () => {
  if (!props.scope.options.length) {
    await fetchSyncList();
  }
});
</script>
<style lang="less" scoped>
.grid {
  overflow-y: auto;
  padding: 16px 8px;

  .active {
    background-color: #f0f0f0;
    color: #1989fa;
  }
}

.notice-bar {
  :deep(.van-notice-bar__wrap) {
    justify-content: center;
  }
}
</style>
